<script lang="ts" setup name="NotFound">
import SvgIcon from "@/components/SvgIcon/index.vue"
</script>
<template>
	<div class="not-found-container">
		<svg-icon icon-class="404" class-name="not-found"></svg-icon>
		<div>
			对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
		</div>
		<div class="not-button-group">
			<router-link to="/" class="not-button not-button-home"> 首页</router-link>
		</div>
	</div>
</template>

<style lang="scss">
.not-found-container {
	width: 100%;
	height: 100%;
	text-align: center;

	.not-found {
		width: calc(100% / 2);
		height: calc(100% / 2);
	}

	.not-button-group {
		height: 60px;

		.not-button {
			display: inline-block;
			height: 40px;
			width: 60px;
			background: #568ec8;
			margin: 0 10px;
			color: #fff;
			font-weight: 600;
			line-height: 40px;
			border-radius: 8px;
		}
	}
}
</style>
